<template>
  <div>
    <ZgCard title="测试">
      <div slot="extra">更多</div>
      <a-divider>需要API的组件</a-divider>
      <a-tabs default-active-key="0" type="card">
        <a-tab-pane key="0" tab="验证码">
          <ZgCaptcha></ZgCaptcha>
        </a-tab-pane>
        <a-tab-pane key="1" tab="图片预览">
          <ZgImgHolder class="mb10" src="xx" isBox :width="300" :height="100"></ZgImgHolder>
          <ZgImgViewer :width="300" :height="150" title="这里是标题" tag="标签"></ZgImgViewer>
        </a-tab-pane>
        <a-tab-pane key="2" tab="模板下载">
          <ZgDownloadTmpl fileName="a.txt"></ZgDownloadTmpl>
        </a-tab-pane>
        <a-tab-pane key="3" tab="数据导入">
          <ZgDataImport
            fileName="a.txt"
            url="/zg-system/dic/import"
            @ok="onImportOk">
          </ZgDataImport>
        </a-tab-pane>
        <a-tab-pane key="4" tab="图片上传">
          <div>upImg：{{ upImg }}</div>
          <ZgUpImg v-model="upImg"></ZgUpImg>
        </a-tab-pane>
        <a-tab-pane key="5" tab="富文本编辑器">
          <a-row :gutter="10">
            <a-col span="12">
              <ZgTinymce v-model="content"></ZgTinymce>
            </a-col>
            <a-col span="12">
              <div v-html="content"></div>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="6" tab="文件上传">
          <ZgUpFile accept="*"></ZgUpFile>
        </a-tab-pane>
        <a-tab-pane key="7" tab="评论点赞">
          <ZgPraise></ZgPraise>
          <ZgComment></ZgComment>
        </a-tab-pane>
        <a-tab-pane key="8" tab="人员、组织选择">
          <a-button @click="choose" >
            人员、组织选择
          </a-button>
          <ZgPersonnelChoose ref="personnelChoose" :selceted="selceted" :isRequired="false" @onOk="save"></ZgPersonnelChoose>
        </a-tab-pane>
        <a-tab-pane key="9" tab="人员查询">
          <a-button @click="personnelSearch" >
            人员查询选择
          </a-button>
          <ZgPersonnelSearch ref="personnerSearch" :searchForm="searchForm" :isRequired="false" @onOk="save"></ZgPersonnelSearch>
        </a-tab-pane>
      </a-tabs>
      <a-divider>纯前端组件</a-divider>
      <a-tabs default-active-key="0" type="card">
        <a-tab-pane key="0" tab="JSON预览">
          <ZgJsonViewer :value="jsonVal"></ZgJsonViewer>
        </a-tab-pane>
        <a-tab-pane key="1" tab="文章">
          <ZgArticle></ZgArticle>
          <div class="w300 pos-rlt bor-border-1">
            <ZgImgViewer :mask="false" :height="200"/>
            <div class="pd15 mb30">
              <div class="ltag-primary"><div class="name">测试</div></div>
              <div class="fs16 mb10 fw6">这里是会议标题这里是会议标题这里是会议标题</div>
              <div>时间：2020/02/11 12:20</div>
              <div>地点：科大天工大厦</div>
              <div>形式：视频会议</div>
            </div>
            <div class="pos-abs r10 b10">已结束</div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="图表">
          <ZgEChart></ZgEChart>
        </a-tab-pane>
        <a-tab-pane key="3" tab="下拉按钮">
          <ZgDropdown size="large" @click="onDropdownClick">下拉按钮<i class="fa fa-angle-down ml3"></i></ZgDropdown>
        </a-tab-pane>
        <a-tab-pane key="4" tab="抽屉">
          <a-button @click="openDrawer">打开抽屉</a-button>
          <ZgDrawer :width="'80%'" title="你好啊" ref="drawer">这里是内容</ZgDrawer>
        </a-tab-pane>
        <a-tab-pane key="5" tab="弹窗">
          <a-button @click="openDialog">打开弹窗</a-button>
          <ZgDialog top="30%" v-model="visible" @ok="visible=false">12132</ZgDialog>
        </a-tab-pane>
        <a-tab-pane key="6" tab="代码编辑器">
          <ZgCodeMirror ref="cm"></ZgCodeMirror>
          <ZgButton @click="getCode" class="mt10" icon="search">获取代码</ZgButton>
        </a-tab-pane>
        <a-tab-pane key="7" tab="级联选择">
          <ZgCascader></ZgCascader>
        </a-tab-pane>
        <a-tab-pane key="8" tab="空提示">
          <div class="w400 h400 flx-c">
            <ZgEmpty></ZgEmpty>
          </div>
        </a-tab-pane>
        <a-tab-pane key="9" tab="手势密码">
          <div>当前密码：1235789</div>
          <ZgGesture></ZgGesture>
        </a-tab-pane>
        <a-tab-pane key="10" tab="视频预览">
          <div class="w400 h400">
            <ZgVedioHolder></ZgVedioHolder>
          </div>
        </a-tab-pane>
        <a-tab-pane key="11" tab="Cron表达式">
          <ZgCron></ZgCron>
        </a-tab-pane>
        <a-tab-pane key="12" tab="页面导出Excel例子">
          <ZgExcelExport></ZgExcelExport>
        </a-tab-pane>
        <a-tab-pane key="13" tab="RSA加解密">
          <div class="w800">
            <div>字符串：<a-input v-model="str"></a-input><a-button @click="toEncrypt">加密</a-button></div>
            <div>加密串：<a-textarea v-model="pwd"></a-textarea><a-button @click="toDecrypt">解密</a-button></div>
            <div>解密后：<a-textarea v-model="pwd2"></a-textarea></div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="14" tab="排序">
          <ZgSort></ZgSort>
        </a-tab-pane>
        <a-tab-pane key="15" tab="树选择">
          {{ treeSelectResult }}<ZgSwitch v-model="treeMultiple"></ZgSwitch>
          <ZgTreeSelect v-model="treeSelectResult" :multiple="treeMultiple"></ZgTreeSelect>
        </a-tab-pane>
      </a-tabs>
    </ZgCard>
  </div>
</template>
<script>
import { encrypt, decrypt } from '@/core/rsa'
export default {
  data () {
    return {
      jsonVal: {
        name: 'zxb',
        list: [{
          sex: 1,
          num: 'xx'
        }]
      },
      imgSrc: 'http://172.16.150.31:9000/bank-account/title.png',
      imgWidth: 100,
      imgHeight: 200,
      visible: false,
      content: '这里是富文本内容',
      str: 'admin',
      pwd: '',
      pwd2: '',
      upImg: '',
      treeSelectResult: [],
      treeMultiple: true,
      searchForm: {
        searchStr: '',
        userIds: ['1407994149180936192', '1864926877955383297'],
        selected: ['1407994149180936192']

      },
      selceted: ['1407994149180936192', '']
    }
  },
  mounted () {
    this.initCodeMirror()
  },
  methods: {
    initCodeMirror () {
      setTimeout(() => {
        if (this.$refs.cm) {
          this.$refs.cm.setVal('这里是代码')
        } else {
          this.initCodeMirror()
        }
      }, 100)
    },
    onDropdownClick (t) {
      console.log(t)
    },
    openDrawer () {
      this.$refs.drawer.open()
    },
    openDialog () {
      this.visible = true
    },
    getCode () {
      alert(this.$refs.cm.getVal())
    },
    onImportOk () {
    },
    toEncrypt () {
      this.pwd = encrypt(this.str)
    },
    toDecrypt () {
      this.pwd2 = decrypt(this.pwd)
    },
    choose () {
      this.$refs.personnelChoose.open()
    },
    personnelSearch () {
      this.$refs.personnerSearch.open()
    },
    save (data) {
      console.log(data)
    }
  }
}
</script>
